@use './base/scroll_bar.scss'as *;

$z_idx_editor_view_tab_bar           : 1;
$z_idx_editor_view_tab_bar_btn       : 1;
$z_idx_editor_view_tab_bar_btn_hover : 2;
$z_idx_editor_view_tab_bar_delimiter : 3;
$z_idx_editor_view_docking_indicator : 4;

:global {
  @font-face {
    font-family: "Nunito";
    font-style : normal;
    font-weight: 400;
    src        : local(""),
      url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
  }

  html {
    height  : 100vh;
    width   : 100vw;
    overflow: hidden;
  }

  body:not(.dev) {
    .dev_only {
      display: none !important;
    }
  }

  body {
    margin: 0;
    font-family: "Nunito",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      "Roboto",
      "Oxygen",
      "Ubuntu",
      "Cantarell",
      "Fira Sans",
      "Droid Sans",
      "Helvetica Neue",
      sans-serif;
    height  : 100vh;
    width   : 100vw;
    overflow: hidden;
  }

  #root {
    height  : 100vh;
    width   : 100vw;
    overflow: hidden;
  }
}

$padding_page_v    : 20px; // 水平方向内衬
$padding_page_h    : 20px; // 垂直方向内衬
$gap_v             : 10px; // 垂直方向的元素间隔
$gap_h             : 10px; // 水平方向的元素间隔
$small_device_width: 500px; // 小屏幕

.flex_antd_table {
  position: relative;
  flex    : 1;

  :global {

    .ant-spin-nested-loading {
      height: 100% !important;

      .ant-spin-container {
        height        : 100% !important;
        display       : flex !important;
        flex-direction: column !important;
        overflow      : hidden !important;

        .ant-table {
          flex    : 1 !important;
          overflow: hidden !important;
          position: relative !important;

          .ant-table-container {
            position: absolute !important;
            width   : 100% !important;
            height  : 100% !important;

            .ant-table-content {
              overflow: auto !important;
              width   : 100% !important;
              height  : 100% !important;
            }

            .ant-table-body {
              flex           : 1 !important;
              overflow-y     : auto !important;
              scrollbar-width: auto !important;
              scrollbar-color: auto !important;

              table {
                min-height: 100% !important;
              }

              .ant-table-tbody {
                min-height: 100% !important;

                .ant-table-placeholder {
                  .ant-table-cell {
                    border-bottom-color: transparent !important;
                    border-bottom-width: 0px !important;
                  }
                }
              }
            }

            .ant-table-thead {
              .ant-table-cell {
                // 表头内容不换行
                word-break : keep-all;
                white-space: nowrap;
              }
            }
          }
        }

        .ant-table-empty {
          .ant-table-body {
            height: 100% !important;
          }
        }
      }

      .ant-table-pagination-right {
        padding-right: 16px !important;
      }
    }
  }
}


@media screen and (max-device-width:$small_device_width) {
  .flex_antd_table {
    :global {
      .ant-table-pagination-right {
        margin: 5px 0px !important;
      }
    }
  }
}

@media screen and (max-device-height:$small_device_width) {}

.operation_row {
  display        : flex;
  justify-content: space-between;
  min-height     : 32px;
  gap            : $gap_v;

  .left_zone {
    display: flex;
    gap    : $gap_v;
  }

  .right_zone {
    display: flex;
    gap    : $gap_v;
  }
}

.empty_in_flex {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center
}

.empty_and_fill {
  position       : absolute;
  left           : 0px;
  top            : 0px;
  right          : 0px;
  bottom         : 0px;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center
}

.workspace_page {
  height        : 100%;
  padding-bottom: $padding_page_v;
  overflow-y    : auto;
  position      : relative;
}

@media screen and (max-device-width:$small_device_width) {
  .workspace_page {
    padding-bottom: calc($padding_page_v / 2);
  }
}

@media screen and (max-device-height:$small_device_width) {
  .workspace_page {
    padding-bottom: calc($padding_page_v / 2);
  }
}


.padding_page_top {
  padding-top: $padding_page_v;
}

.padding_page_bottom {
  padding-bottom: $padding_page_v;
}

.padding_page_v {
  @extend .padding_page_top;
  @extend .padding_page_bottom;
}

.padding_page_left {
  padding-left: $padding_page_h;
}

.padding_page_right {
  padding-right: $padding_page_h;
}

.padding_page_h {
  @extend .padding_page_left;
  @extend .padding_page_right;
}

.padding_page {
  @extend .padding_page_v;
  @extend .padding_page_h;
}


@media screen and (max-device-width:$small_device_width) {
  .padding_page_top {
    padding-top: calc($padding_page_v / 2);
  }

  .padding_page_bottom {
    padding-bottom: calc($padding_page_v / 2);
  }

  .padding_page_v {
    @extend .padding_page_top;
    @extend .padding_page_bottom;
  }

  .padding_page_left {
    padding-left: calc($padding_page_h / 2);
  }

  .padding_page_right {
    padding-right: calc($padding_page_h / 2);
  }

  .padding_page_h {
    @extend .padding_page_left;
    @extend .padding_page_right;
  }

  .padding_page {
    @extend .padding_page_v;
    @extend .padding_page_h;
  }
}

.vertical_flex_workspace_page {
  @extend .workspace_page;

  @extend .padding_page;

  flex-direction: column;
  display       : flex;
  align-items   : stretch;
  gap           : $gap_v;

  &.mobile {
    padding: 0px;
    gap    : 0px;
  }

  &.desktop {
    display: flex;
  }
}

@media screen and (max-device-width:$small_device_width) {
  .vertical_flex_workspace_page {
    @extend .padding_page;
    gap: calc($gap_v / 2);
  }
}

@media screen and (max-device-height:$small_device_width) {
  .vertical_flex_workspace_page {
    gap    : calc($gap_v / 2);
    padding: calc($padding_page_v / 2) calc($padding_page_h / 2);
  }
}

.horizontal_flex_workspace_page {
  @extend .workspace_page;
  ;
  flex-direction: row;
  display       : flex;
  align-items   : stretch;
}

:global {
  .DEV_TODO {
    background-color: crimson;
    font-size       : 16px;
    color           : lightgray;
    padding         : 5px 10px;

    .DEV_TODO_NAME {
      color      : white;
      font-weight: bold;
      user-select: all;
    }
  }

  .ant-table-cell {
    .ant-dropdown-trigger {
      // 表格单元格内的下拉菜单默认不跟随单元格宽度 -Gim
      width: 0 !important;
    }

    .ant-btn-link {
      padding-left : 5px !important;
      padding-right: 5px !important;
    }
  }

  .app_light * {
    @include scroll_bar(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), 5px);
    --view-bg-color-normal    : #e9e9e9;
    --view-fg-color-normal    : white;
    --view-border-color-normal: #c0c0c0;
  }

  .app_dark * {
    @include scroll_bar(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4), 5px);
    --view-bg-color-normal    : rgb(51, 51, 51);
    --view-fg-color-normal    : rgb(70, 70, 70);
    --view-border-color-normal: #888888;
  }
}